<!--推广图-->
<template>

	<view>
		<view class="menu-box flex-center">
			<view class="menu" @click="onChangeMenu" data-type="0">推广海报
				<view v-if="type==0" class="menu-line"></view>
			</view>
			<view class="menu" @click="onChangeMenu" data-type="1"> 朋友圈素材
				<view v-if="type==1" class="menu-line"></view>
			</view>
		</view>
		<view v-if="type==0">
			<scroll-view class="top" v-if="tableList.length>0" scroll-x="true">
				<!-- tab -->
				<view class="tab">
					<view class="tab_nav" style='font-size:12px'>
						<view class="setTab" v-for="(item, index) in tableList" :key="item.id" :data-index="index"
							:data-sortb="item.sortStatus" :class=" tableIndex == index ? 'active' : ''"
							:data-id="item.id" @click="ontabtap">
							{{item.productName}}
						</view>
					</view>
				</view>
			</scroll-view>
			<!--end  top-->
			<view class="list">
				<view class="img_wrap" v-for="item in contentList" :key="item.id" @click="toDetail(item.url)">
					<image class="img" :src="item.url"></image>
				</view>
			</view>
			<uni-load-more :status="status" v-if="pageSize > 1" />
		</view>
		<view v-if="type==1">
			<scroll-view class="top" v-if="mNavList.length>0" scroll-x="true">
				<!-- tab -->
				<view class="tab">
					<view class="tab_nav" style='font-size:12px'>
						<view class="setTab" v-for="(item, index) in mNavList" :key="index"
							:class=" mid == item.itemValue ? 'active' : ''" :data-id="item.itemValue"
							@click="onChangeMNav">
							{{item.itemText}}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="material-box">
				<view class="material flex-justify" v-for="(item,index) in contentList" :key="index">
					<image :src="userInfo.icon" class="head-img"></image>
					<view class="material-content">
						<view class="name">{{userInfo.name}}</view>
						<view>
							<text class="content-text">{{item.copywriting}}</text>
						</view>
						<image :src="item.url" @click="reviewImages" :data-img="item.url" :show-menu-by-longpress="true"
							class="material-img"></image>
						<view class="tips-text">点击图片长按保存</view>
					</view>
					<view class="material-btn" @click="copy" :data-text="item.copywriting">复制文案</view>
				</view>
			</view>
			<uni-load-more :status="status" v-if="pageSize > 1" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableIndex: 0,
				tableList: [],
				contentList: [],
				pid: '',
				pageSize: 0,
				status: 'more',
				pageNo: 1,
				type: 0, //菜单  
				mNavList: [], //素材分类
				mid: 0, //素材分类id
				userInfo: {},
			};
		},
		onLoad() {
			this.getNav();
			this.getMaterialNav();
		},
		/**
		 * 上拉加载 这很重要
		 */
		onReachBottom() {
			let that = this;
			let query = {};
			let pageNo = this.pageNo + 1;
			if (pageNo <= this.pageSize) {
				query.pageNo = pageNo;
				query.pid = this.pid;
				if (that.type == 0) {
					that.getMoreData(query)
				} else if (that.type == 1) {
					++this.pageNo;
					this.getCopywritingData()
				}

			} else {
				that.status = "noMore"
			}
		},
		methods: {
			//复制文案
			copy(e) {
				let text = e.currentTarget.dataset.text;
				uni.setClipboardData({
					data: text,
					success(res) {

					}
				})
			},
			//查看图片
			reviewImages(e) {
				let img = e.currentTarget.dataset.img;
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: [img] // 需要预览的图片http链接列表
				})
			},
			//获取素材
			getCopywritingData() {
				this.$api.getCopywritingData({
					pid: this.mid,
					pageNo: this.pageNo,
					pageSize: 5
				}).then(res => {
					this.pageSize = res.data.data.data.pages;
					let data = res.data.data.data;
					this.contentList = this.contentList.concat(data.records);
					this.userInfo = res.data.data;
					this.pageNo = res.data.data.data.current;
				})
			},
			//切换朋友圈素材分类
			onChangeMNav(e) {
				let id = e.currentTarget.dataset.id;
				console.log(id, this.mid)
				if (this.mid != id) {
					this.mid = id;
					this.pageNo = 1;
					this.contentList = [];
					this.getCopywritingData();
				}
			},
			//获取朋友圈素材分类
			getMaterialNav() {
				this.$api.plainDictionary('copywriting_classification').then(res => {
					this.mNavList = res.data.data;
					this.mid = res.data.data[0].itemValue;
				})
			},
			//切换菜单
			onChangeMenu(e) {
				let type = e.currentTarget.dataset.type;
				this.type = type;
				this.contentList = [];
				this.pageNo = 1;
				if (type == 0) {
					//获取海报
					// this.getAllPosters();
					this.getList({
						pageNo: this.pageNo,
						pid: this.pid
					});
				} else {
					//获取朋友圈素材
					this.getCopywritingData();
				}
			},
			//预览图片
			preview(e) {
				let url = e.currentTarget.dataset.url;
				let urls = [];
				this.data.list.forEach(item => {
					urls.push(item.url)
				});
				wx.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls,
					showmenu: true
				})
			},
			async getNav() {
				let {
					data
				} = await this.$api.getProNav()
				let arr = [{
					productName: "推荐",
					id: ""
				}]
				this.tableList = [...arr, ...data.data]
				let query = {};
				// query.pid = data.data[0].id;
				query.pageNo = 1;
				this.pid = this.tableList[0].id;
				this.getList(query);
			},
			//栏目点击事件
			ontabtap(e) {
				let that = this;
				let index = e.target.dataset.index || e.currentTarget.dataset.index;
				let columnId = e.currentTarget.dataset.id;
				if (that.pid !== columnId) {
					that.pid = columnId;
					let query = {};
					that.tableIndex = index;
					query.pid = columnId;
					query.pageNo = 1;
					that.contentList = [];
					that.getList(query);

				}
			},
			//根据条件查询列表
			getList(param) {
				this.$api.getProList(param).then(res => {
					this.contentList = res.data.data.records;
					this.pageSize = res.data.data.pages;
					this.pageNo = res.data.data.current;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					})
				})
			},
			//获取更多数据
			getMoreData(param) {
				this.$api.getProList(param).then(res => {
					let data = res.data.data.records;
					if (data) {
						this.contentList = this.contentList.concat(data);
						this.pageSize = res.data.data.pages;
						this.pageNo = res.data.data.current;
					}
				})
			},

			toDetail(url) {
				let arr = [];
				this.contentList.forEach((item) => {
					arr.push(item.url);
				})
				// console.log(arr)
				uni.previewImage({
					urls: arr,
					current: url,
					longPressActions: {
						itemList: ['保存图片'],
						success(data) {
							uni.saveImageToPhotosAlbum({
								filePath: arr[data.index],
								success: function() {
									uni.showToast({
										icon: 'none',
										title: '保存相册成功',
										position: 'bottom'
									})
								}
							});
						}
					}
				
				
				
				});
			}
		},
	}
</script>
<style>
	page {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.top {
		width: 100%;
		white-space: nowrap;
		position: fixed;
		top: calc(var(--window-top) + 88rpx);
		z-index: 99;
		left: 0;
		background: $dtg-color-primary;

		/deep/.uni-scroll-view {
			border-radius: 20rpx 20rpx 0 0;
			background: #FFFFFF;
		}

		/deep/.uni-scroll-view::-webkit-scrollbar {
			display: none
		}

		.tab {
			display: flex;
			flex-direction: column;
			border-radius: 20rpx 20rpx 0 0;
		}

		.tab_nav {
			height: 80rpx;
			background: #fff;
			display: flex;
			line-height: 79rpx;
			position: relative;
			color: #999999;
			font-size: 28rpx;
		}

		.setTab {
			min-width: 20%;
			max-width: 20%;
			text-align: center;
			height: 80rpx;
			background-color: white;
			font-size: 26rpx;
			position: relative;
		}

		.active {
			color: black;
			font-size: 15px;
			font-weight: bold;
		}

		.active::after {
			content: "";
			width: 40rpx;
			height: 4rpx;
			background: $dtg-color-primary;
			border-radius: 4rpx;
			margin: -4rpx auto;
			display: block;
			animation: roll .23s linear;
		}

		@keyframes roll {
			0% {
				width: 0;
			}

			100% {
				width: 40rpx;
			}
		}

		.con {
			overflow: hidden;
		}
	}

	.list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 188rpx;
		flex-wrap: wrap;

		.img_wrap {
			width: 48%;
			margin-bottom: 20rpx;
		}

		.img {
			width: 100%;
			height: 690rpx;
		}
	}

	.menu-box {
		height: 88rpx;
		background-color: #585CF7;
		width: 100%;
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		z-index: 99;
	}

	.menu {
		flex: 1;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.menu-line {
		width: 60rpx;
		height: 4rpx;
		background: #F8F8F8;
		border-radius: 2rpx;
		margin-top: 25rpx;
	}

	.head-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.material-box {
		padding-top: 240rpx;
	}

	.material {
		padding: 0 30rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		margin-bottom: 30rpx;
	}

	.material-btn {
		width: 150rpx;
		height: 50rpx;
		background: #EEEEFE;
		border-radius: 25rpx;
		font-size: 26rpx;
		color: #585CF7;
		line-height: 50rpx;
		text-align: center;
		margin-left: 30rpx;
	}

	.material-content {
		flex: 1;
		text-align: left;
	}

	.name {
		font-size: 32rpx;
		color: #999999;
		margin-bottom: 28rpx;
	}

	.content-text {
		font-size: 30rpx;
		color: #333333;
		line-height: 46rpx;
		margin-bottom: 30rpx;
	}

	.material-img {
		width: 200rpx;
		height: 260rpx;
		margin-bottom: 30rpx;
	}

	.tips-text {
		font-size: 22rpx;
		color: #999999;
	}
</style>
